import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { useRouter } from '@tarojs/taro';
import { ConfigProvider, Progress } from '@nutui/nutui-react-taro';
import { Clock, Fabulous } from '@nutui/icons-react-taro';
import { taskApi } from '../../../services/taskApi';
import './index.scss';

const TaskDetail = () => {
    const [taskDetail, setTaskDetail] = useState(null);
    const router = useRouter();
    const { task_id, SessionId } = router.params;

    console.log('task_id', task_id);

    useEffect(() => {
        if (task_id) {
            getTaskDetail();
        }
    }, [task_id]);

    const getTaskDetail = async () => {
        try {
            const res = await taskApi.getTaskDetail({ task_id, 'Session-Id': SessionId });
            if (res) {
                setTaskDetail(res[0]);
            }
        } catch (error) {
            console.error('获取任务详情失败', error);
        }
    };

    const formatDateTime = (dateTimeStr) => {
        if (!dateTimeStr) return '';
        const date = new Date(dateTimeStr);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
    };

    // 将中文状态转换为英文类名
    const getStatusClass = (status) => {
        switch (status) {
            case '进行中':
                return 'in-progress';
            case '已完成':
                return 'completed';
            case '已结束':
                return 'completed';
            case '已逾期':
                return 'overdue';
            default:
                return '';
        }
    };

    // 获取进度值，处理不同的数据格式
    const getProgressValue = (progress) => {
        if (progress === null || progress === undefined) return 0;
        if (typeof progress === 'number') return progress;
        if (Array.isArray(progress) && progress.length > 0) return progress[0];
        return 0;
    };

    if (!taskDetail) {
        return <View className="loading">加载中...</View>;
    }

    const progressValue = getProgressValue(taskDetail.progress);

    return (
        <ConfigProvider>
            <View className="task-detail">
                <View className="task-header">
                    <View className="task-title">
                        <Text className="task-title-text">{taskDetail.basic_task_requirements}</Text>
                        <View className="task-status">
                            <Text className={`status-badge ${getStatusClass(taskDetail.status)}`}>
                                {taskDetail.status}
                            </Text>
                        </View>
                    </View>
                    {taskDetail.completed_task_description && (
                        <View className="task-score">
                            <View className="meta-item">
                                <Fabulous />
                                <Text className="meta-text">{taskDetail.completed_task_description} 分</Text>
                            </View>
                        </View>
                    )}
                    <View className="task-meta">
                        <View className="meta-item">
                            <Clock />
                            <Text className="meta-text">
                                {formatDateTime(taskDetail.start_time)} - {formatDateTime(taskDetail.end_time)}
                            </Text>
                        </View>
                    </View>

                </View>

                {taskDetail.status === '进行中' && (
                    <View className="task-progress">
                        <View className="progress-header">
                            <Text className="section-title">完成进度</Text>
                            <Text className="progress-value">{progressValue}%</Text>
                        </View>
                        <Progress
                            percent={progressValue}
                            color="#3b82f6"
                        />
                    </View>
                )}

                <View className="task-content">
                    <View className="content-section">
                        <Text className="section-title">基本要求</Text>
                        <View className="section-content">
                            <Text className="content-text">{taskDetail.basic_task_requirements}</Text>
                        </View>
                    </View>

                    <View className="content-section">
                        <Text className="section-title">详细要求</Text>
                        <View className="section-content">
                            <towxml mdText={{ text: taskDetail.detail_task_requirements }} openTyper={false} />
                        </View>
                    </View>
                </View>
            </View>
        </ConfigProvider>
    );
};

export default TaskDetail; 